<script setup>
import { useRouter, useRoute } from "vue-router";
import { useUserInfoStore } from "@/stores/userInfo.js";
import { computed, ref, watch } from "vue";

const route = useRoute();
const router = useRouter();
const store = useUserInfoStore();

// 需要隐藏的路由
const hiddenPaths = [
  '/educational/classManagement/classDetails'
];

// 过滤掉不该出现在菜单中的路径
const filterHiddenMenus = (menus) => {
  return menus
      .filter(menu => !hiddenPaths.includes(menu.path))
      .map(menu => {
        const children = Array.isArray(menu.childrenMenus)
            ? filterHiddenMenus(menu.childrenMenus)
            : [];
        return {
          ...menu,
          childrenMenus: children
        };
      });
};

// 计算菜单
const asideMenus = computed(() => {
  if (!store.Menus || store.Menus.length === 0) return [];
  return filterHiddenMenus(store.Menus);
});

// 默认激活菜单项
const defaultActive = ref(route.path || '/');

// 实时更新 active
watch(
    () => route.path,
    (newPath) => {
      defaultActive.value = newPath || '/';
    }
);

// 菜单选择跳转
const handleSelect = (e) => {
  router.push(e);
};

// 菜单是否折叠
const isCollapsed = computed(() => !(store.asideWidth === "250px"));
</script>

<template>
  <div class="f-menu" :style="{ width: store.asideWidth }">
    <el-menu
        v-if="asideMenus.length > 0"
        :default-active="defaultActive"
        unique-opened
        :collapse-transition="false"
        :collapse="isCollapsed"
        class="border-0"
        @select="handleSelect"
    >
      <template v-for="(item, index) in asideMenus" :key="index">
        <el-sub-menu
            v-if="Array.isArray(item.childrenMenus) && item.childrenMenus.length > 0"
            :index="item.path || 'submenu-' + index"
        >
          <template #title>
            <span>{{ item.menuName }}</span>
          </template>
          <el-menu-item
              v-for="(item2, index2) in item.childrenMenus"
              :key="index2"
              :index="item2.path || 'item-' + index2"
          >
            {{ item2.menuName }}
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item v-else :index="item.path || 'item-' + index">
          <span>{{ item.menuName }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<style scoped>
.f-menu {
  transition: all 0.2s;
  top: 64px;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  @apply fixed shadow-md bg-light-50;
}
.f-menu::-webkit-scrollbar {
  width: 0;
}
</style>
